<template>
  <view class="spell-skill-header flex-x-c">
<!--    <view
      class="time-single buying"  :style="timeAxis"
      @click="selectTime(timeDataList[currentIndex], currentIndex)"
      :class="[buyingShadow ? 'buying-shadow' : '', isSelectNearlyTime ? 'active' : '', custom ? 'custom-text' : '']"
    >
      <view class="time-num f-bold" v-if="timeStyle == '1'">{{ currentItem.exEffectiveTime | timeForm('HH:MM') }}</view>
      <view class="time-num f-bold" v-else>{{ currentItem.exEffectiveTime | timeForm('mm-dd') }}</view>
      <text class="time-text">{{ statusForm(currentItem.isStart, currentItem.effectiveTime)}}</text>
    </view> -->
    <scroll-view
      class="header-time-wrapper"
      scroll-x="true"
      :scroll-left="scrollLeft"
      @scroll="dateScroll"
    >
      <view
        class="time-content"
        v-for="(item, index) in timeDataList"
        :key="index"
		:data-ui="index"
        @click="selectTime(item, index)"
      >
        <view class="time-single" :class="[current == index ? 'active' : '',custom ? 'custom-text' : '']">
          <!-- <view class="time-num f-bold" v-if="timeStyle == '1'">{{ item.exEffectiveTime | timeForm('HH:MM') }}</view> -->
          <view class="time-num">{{ formatTomorrow(item)}}</view>
          <!-- <text class="time-text">{{ statusForm(item.isStart, item.effectiveTime)}}</text> -->
		  <view v-if='current == index' class='active-line' :class="[custom ? 'custom-active-line' : '']"></view>
		</view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      scrollLeft: 0,
      buyingShadow: false, //抢购中是否增加阴影效果
      isSelectNearlyTime: false, //是否选中的是距离当日最近的日期
      current: -1, //当前选中时间
    }
  },
  props: {
	buyingTime:{
		//抢购中的时间
		type: [Number, String],
		default: 0,
	},
	currentTime: {
		//获取系统当前时间
		type: [Number, String],
		default: 0,
	},
    timeDataList: {
      //时间数组
      type: Array,
      default: () => {
        return []
      },
    },
    minNearTime: {
      //距离当天前最近的时间
      type: [String, Number],
      default: '',
    },
    type: {
      type: [String, Number],
      default: 0,
    },
    currentIndex: {
      type: Number,
      default: -1,
    },
    // 使用默认样式，true为自定义样式
    custom: {
      type: Boolean,
      default: false
    },
    timeAxis: String,
    // 时间样式
    timeStyle: {
      type: String,
      default: '1',
    },
  },
	computed:{
		currentItem: function() {
			return this.timeDataList.length ? this.timeDataList[this.currentIndex] : {}
		}
	},
  mounted() {
    this.current = this.currentIndex

	if(this.currentIndex > 2){
		let scrollLeft = (uni.upx2px(160) * (this.currentIndex-2))-uni.upx2px(50)
		setTimeout(()=>{
			this.scrollLeft = scrollLeft
		},200)
	}
  },
  methods: {
	// 格式化显示明天
	formatTomorrow(e){
		let date = this.$options.filters.timeForm(e,'mm-dd');
		// let date = this.$options.filters.timeForm(e.exEffectiveTime,'mm-dd');
		// let sysTime2 = new Date(this.$utils.formatTime(e.sysTime)).getTime()+86400000;
		let sysTime = new Date(this.currentTime).getTime()+86400000;
		let tomorrow = this.$utils.dateFormat(new Date(sysTime),'mm-dd');
		if(e==this.buyingTime){
			return '抢购中'
		}
		return date == tomorrow?'明天':date;
	},
    //点击时间
    selectTime(item, index) {
      if (this.minNearTime == item.effectiveTime) {
        this.isSelectNearlyTime = true
      } else {
        this.isSelectNearlyTime = false
      }
      // let dataArr = {};
      // let goods_jump_top = uni.createSelectorQuery().selectAll(".time-single");
      // goods_jump_top.boundingClientRect(data => {
      // 	dataArr = data;
      // }).exec();
      // let currWidth = dataArr[this.current].width;
      // this.scrollLeft = (this.current - 1) * currWidth;
      this.scrollLeft = (index - 1) * 80

      // 活动时间、失效时间转化为时间戳
      // item.effectiveTime = new Date(item.effectiveTime).getTime()
      // item.expireTime = new Date(item.expireTime).getTime()
      // this.$emit('selectTime', {
      //   timeItem: item,
      //   currentIndex: index
      // })
	  
	  this.$emit('selectTime', {
	    timeItem: item,
	    currentIndex: index
	  })
    },
    dateScroll(e) {
      let currentWith = uni.upx2px(158) * this.currentIndex + 10
      e.detail.scrollLeft >= currentWith ? (this.buyingShadow = true) : (this.buyingShadow = false)
    },
    statusForm (status, exEffectiveTime) {
      let timeStr = this.$utils.dateFormat(new Date(exEffectiveTime), 'mm-dd')
      if (this.timeStyle == '2') timeStr = this.$utils.dateFormat(new Date(exEffectiveTime), 'HH:MM')
			if (this.type == '01' || this.type == '03') {
				return status ? (status == 2 ? '抢购中' : '已开始') : timeStr
			} else {
				return status ? (status == 2 ? '拼团中' : '已开始') : timeStr
			}
		}
  },
  watch: {
    currentIndex(v) {
      this.current = v
      if (this.minNearTime == this.timeDataList[this.current].effectiveTime) {
        this.isSelectNearlyTime = true
      } else {
        this.isSelectNearlyTime = false
      }
      //最近活动时间默认显示在中间
      // if(this.currentIndex > 2){
      // 	let scrollLeft = 80 * (this.currentIndex-2)
      // 	setTimeout(()=>{
      // 		this.scrollLeft = scrollLeft
      // 	},200)
      // }
    },
  },
}
</script>

<style lang="scss">
.spell-skill-header {
  overflow: hidden;
  width: 750rpx;
  // height: 130rpx;
  height:84rpx;
  // padding: 0 10rpx;
  z-index: 1;
  .time-single {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 146rpx;
    // height: 130rpx;
	height:105rpx;
    padding-top: 26rpx;
    color: #666666;
    .time-num {
      font-size: 36rpx;
      line-height: 1;
	  font-weight:500
    }
    .time-text {
			margin-top: 8rpx;
      font-size: 24rpx;
    }
  }
  .active {
    color: #FF004F;
    opacity: 1 !important;
  }
  .buying {
    // position: absolute;
    // top: 0;
    // left: 0;
    display: none;
		flex-shrink: 0;
    text-align: center;
    opacity: 1 !important;
    transition: all 400ms ease-in;
    z-index: 1;
  }
  .buying-shadow {
    display: flex;
    color: #FF004F;
    box-shadow: 3px -8px 6px 0px rgba(0, 0, 0, 0.1);
  }
  .header-time-wrapper {
    width: 100%;
    height: 100%;
    text-align: left;
    white-space: nowrap;
	// background-color: #ff7183;
    .time-content {
      display: inline-block;
	  width:150rpx;
      &.time-content:last-child {
        // margin-right: 160rpx;
      }
    }
  }
  .custom-text {
    color: #fff !important;
    opacity: .5;
  }
}

.active-line{
	width:35rpx;
	height:8rpx;
	background-color: #FF004F;
	border-radius: 20rpx;
	margin-top:10rpx;
}
	
.custom-active-line{
	background-color: #fff!important;
}
</style>
